<template>
<div>
  <el-dialog title="请选择${entityDesc!""}"
             :visible.sync="selectDialogVisible"
             width="80%" @close="closeDialog">
    <div style="padding-bottom: 50px;">
      <el-card class="filter-container" shadow="never">
        <div>
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          <el-button
                  style="float:right"
                  type="primary"
                  @click="handleSearchList()"
                  size="small">
            查询搜索
          </el-button>
          <el-button
                  style="float:right;margin-right: 15px"
                  @click="handleResetSearch()"
                  size="small">
            重置
          </el-button>
        </div>
        <div style="margin-top: 15px">
          <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
               ${searchConditionInput!""}
          </el-form>
        </div>
      </el-card>

      <div class="table-container">
        <el-table :data="selectList"
                  style="width: 100%;"
                  v-loading="selectListLoading" border>
            <#if elTableColumnExpandStr?length gt 0>
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-form label-position="left" inline class="demo-table-expand"  label-suffix="："
                                 style="background-color: #eeeeee4f">
                            ${elTableColumnExpandStr!""}
                        </el-form>
                    </template>
                </el-table-column>
            </#if>
            ${elTableColumn!""}
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleSelect(scope.row)">选择</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery.current"
                :page-size="listQuery.pageSize"
                :page-sizes="[5,10,15]"
                :total="total">
        </el-pagination>
      </div>

 <#if hasFileManager>
     <file-manager :updateObject="updateObject" :fileKeys="fileKeys" :visible="fileDialogVisible"
                   @updateFile="updateFile"
                   @close="fileDialogVisible=false"></file-manager>
 </#if>
    </div>
  </el-dialog>

    ${associationDialog!""}
</div>
</template>

<script>
  <#list importSet as data>
  ${data}
  </#list>

  const defaultListQuery = {
    current: 1,
    pageSize: 10,
    <#if queryKeysMap?exists>
    <#list queryKeysMap?keys as key>
    ${key}:${queryKeysMap[key]},
    </#list>
    </#if>
  }
  export default {
  components: {<#list importComponents as data>${data},</#list>},
  name: "${entityName!""}Select",
  props: {
    visible: {
      default: false
    }
  },
  data() {
    return {
      <#if hasImageUpload>
      baseUri: getBaseUri(),
      downloadPersonalFileUrl: "api/sysFile/downloadPersonalFile?fileId=",
      </#if>
      <#if hasFileManager>
      fileDialogVisible: false,
      fileKeys: '',
      updateObject: {},

      </#if>
      <#if hasAssociation>
      componentSelectFromSearch: false,
      componentSelectField: '',
      componentAssociationField: '',
      componentAssociationTable: '',
      componentAssociationShowName: '',
      </#if>
      <#if otherReturnDataMap?exists>
      <#list otherReturnDataMap?keys as key>
      ${key}:${otherReturnDataMap[key]},
      </#list>
      </#if>
      selectList: [],
      total: null,
      selectListLoading: false,
      selectDialogVisible: false,
      listQuery: this.$deepClone( defaultListQuery),
    }
  },
  watch:{
    visible(val){
      this.selectDialogVisible = val
      if(val){
        this.getList()
      }
    }
  },
  methods: {
      <#if hasAssociation>
      showComponent(isSearch, sField, aTable, aField, aShowName) {
          this[aTable + "SelectVisible"] = true;
          this.componentSelectFromSearch = isSearch
          this.componentSelectField = sField
          this.componentAssociationField = aField
          this.componentAssociationTable = aTable
          this.componentAssociationShowName = aShowName
      },
      onComponentSelect(data) {
          if (this.componentSelectFromSearch) {
              this.listQuery[this.componentSelectField] = data[this.componentAssociationField]
              let json = this.listQuery[this.componentAssociationTable] || {}
              json[this.componentAssociationShowName] = data[this.componentAssociationShowName]
              this.listQuery[this.componentAssociationTable] = json
          } else {
              this.${entityName!""}[this.componentSelectField] = data[this.componentAssociationField]
              let json = this.${entityName!""}[this.componentAssociationTable] || {}
              json[this.componentAssociationShowName] = data[this.componentAssociationShowName]
              this.${entityName!""}[this.componentAssociationTable] = json
          }
      },
      </#if>
      ${additionMethod!""}
      <#if hasImageUpload>
            handleRemoveImage(key) {
                if (this.${entityName!""}[key]) {
                    this.${entityName!""}[key] = ""
                }
            },
            handleImageExceed() {
                this.$message({
                    message: "只能选择一张图片",
                    type: 'error'
                })
            },
            handleImageUpload(file, key) {
                let params = new FormData()
                params.append("file", file.file);
                let headers = {
                    'Content-Type': 'multipart/form-data; name="file"'
                }
                sysFilePostRequireByConfig('uploadImage', params, headers).then(response => {
                    if (response) {
                        this.$message({
                            message: response.message,
                            type: response.status ? 'success' : 'error'
                        })
                        this.${entityName!""}[key] = response.data.id
                    }
                })
            },
            beforeImageUpload(file) {
                const isJPG = file.type.includes("image");
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('只允许上传 png、jpg、jpeg 格式的图片文件!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            </#if>
      <#if hasFileManager>
      updateFile(server, updateObject, callback) {
          ${entityName!""}PostRequire(server, updateObject).then((response) => {
              if (response.status) {
                  this.getList()
                  this.updateObject = updateObject
                  callback(response)
              }
          })
      },
      handleManagerFile(row, key) {
          this.updateObject = this.$deepClone(row);
          this.fileKeys = key
          this.fileDialogVisible = true
      },
      </#if>
    handleSizeChange(val) {
      this.listQuery.current = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    getList() {
      this.selectListLoading = true
      ${entityName!""}PostRequire('listPage', this.listQuery).then(response => {
        this.selectListLoading = false
        this.selectList = response.data.records
        this.total = response.data.total
      })
    },
    handleResetSearch() {
      this.listQuery = this.$deepClone( defaultListQuery)
    },
    handleSearchList() {
      this.listQuery.current = 1
      this.getList()
    },
    closeDialog(){
      this.selectDialogVisible = false
      this.$emit('close')
    },
    handleSelect(row) {
      this.$emit("onSelect",row)
      this.closeDialog()
    }
  }
}
</script>
<#if elTableColumnExpandStr?length gt 0>
    <style>
        .demo-table-expand label {
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-left: 10px;
            width: 100%;
        }
    </style>
</#if>